<script setup>
import { computed, ref } from "vue";
import data from "../store/data";
const list = ref(data);
// 删除任务
const del = (d) => {
  const index = list.value.findIndex((i) => d.id === i.id);
  if (index !== -1) {
    list.value.splice(index, 1);
  }
  data.value = list.value;
};

// 未完成任务
const no = () => {
  list.value = data;
  list.value = list.value.filter((e) => e.isChange === false);
};
// 已完成的任务
const yes = () => {
  list.value = data;
  console.log(data);
  list.value = list.value.filter((e) => e.isChange === true);
};
// 所有任务
const all = () => {
  list.value = data;
};
// 回车
const text = ref();
const enter = () => {
  console.log(text.value);
  list.value.push({ id: 9, content: text.value, isChange: false });
  data.value = list.value;
};
console.log(list);
// 多选框
const isTrue = (d) => {
  d.isChange = !d.isChange;
};

// 计算未完成任务的数量
const noNum = computed(() => {
  return list.value.filter((element) => element.isChange === false).length;
});

/**
  列表页渲染的数据是list
  原始数据是data
  列表默认渲染把data直接赋值给list
  未完成任务数据渲染是把data.is为false过滤出来赋值给list再渲染
  已完成任务数据渲染是把data.is为true过滤出来赋值给list再渲染
  所有任务数据渲染是把data直接赋值给list
 */
</script>
<template>
  <div class="todoList">
    <div class="top">
      <div>任务计划列表</div>
    </div>
    <div class="content">
      <div class="input">
        <h3>添加任务：</h3>
        <input
          type="text"
          placeholder="例如吃饭睡觉打豆豆； 提示：+回车即可添加任务"
          class=""
          v-model="text"
          @keyup.enter="enter"
        />
      </div>
      <div class="changes">
        <div class="num">{{ noNum }}个任务未完成</div>
        <div class="change">
          <div @click="all()">所有任务</div>
          <div @click="no()">未完成任务</div>
          <div @click="yes()">已完成任务</div>
        </div>
      </div>
      <div class="block">
        <div class="box" v-for="d in list" :key="d.id">
          <input type="checkbox" :checked="d.isChange" @click="isTrue(d)" />
          <div class="text">{{ d.content }}</div>
          <div class="del" @click="del(d)">删除</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.todoList {
  padding-bottom: 20px;
  width: 100vw;
  background-color: antiquewhite;
  .top {
    width: 100vw;
    background-color: rgba(205, 17, 17, 0.622);
    color: white;
    height: 30px;
    line-height: 30px;
    div {
      width: 55%;
      margin: 0 auto;
    }
  }
  .content {
    width: 55%;
    margin: 0 auto;
    .input {
      width: 100%;
      height: 100px;
      display: flex;
      flex-direction: column;
    }
    .changes {
      display: flex;
      justify-content: space-between;
      .num {
        color: red;
      }
      .change {
        display: flex;
        width: 55%;
        justify-content: space-between;
        cursor: pointer;
      }
    }
    .block {
      .box {
        display: flex;
        justify-content: space-between;
        padding-top: 15px;
      }
    }
  }
}
</style>
